<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .wrap{
            padding: 8px;
        }
        .wrap button{
            width: 45px;
            height: 30px;
        }
        .wrap button~button{
            margin-left: 10px;
        }
        .slideBar{
            width: 1100px;
            height: 600px;
            margin-top: 10px;
            border: 1px solid #333;
            /* border-top: 0; */
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="buttonGroup">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动  每隔固定时间改变元素的位置(宽度/高度 )
    // (1)  计时器 / 延时器
    // (2)  改变元素的位置   => margin position translate

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var timer = null; // 全局变量 记录计时器的编号

    // 点击开始  从当前位置 => 终点 (1000)
    // 正向运动  从当前位置 => 终点 (1000)   终点值>起点值
    start.onclick = function(){
        animate(ball,"left",1000);
    }
    
    
    pause.onclick = function(){
        clearInterval(timer);
    }
    
    // 反向运动  从当前位置 => 终点 (0)    终点值 < 起点值
    back.onclick = function(){
        animate(ball,"left",0);
    }

    // ele  运动的元素
    // attr 运动的css属性("left" top width height opacity)
    // end  运动的终点值 
    function animate(ele,attr,end){
        //  1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        // var cur = ele.offsetLeft;    // 快捷取值
        var cur = parseFloat(getStyle(ele,attr));  //传统的获取非行内样式
        end = parseFloat(end);       // 设置运动的终点值 (可以去单位)

        if(attr === "opacity"){  //opacity (0-1) =>  原值扩大1000倍(0-1000)
            cur *= 1000;
            end *= 1000;
        }


     

        var speed = 0;  // 1. 没有运动之前初始速度   2. 记录每次运动的速度

        clearInterval(timer);         // 每次启动下一个之前 清除上一个
        timer = setInterval(function(){
            // 匀速运动
            // speed = end >= cur ? 20 : -20 ;                // 每隔10ms运动的距离  (匀速)

            // 加速运动
            // 正向运动(speed > 0) speed++
            // 反向运动(speed < 0) speed--
            // speed  = end >= cur ? speed + 2 : speed - 2;


            // 缓冲运动  => 每次走剩余的 n分之1  
            // n => 缓冲因子 (缓冲因子一般 8-12之间)

            // 正向运动(speed>0)   最后出现小数  +0.0000001  => 1
            // speed = (end - cur) / 10;
            // speed = Math.ceil(speed);
            
            // // 反向运动(speed>0)   最后出现小数  -0.0000001  => -1
            // speed = (end - cur) / 10;
            // speed = Math.floor(speed);

            // speed = (end - cur) / 10;
            // speed = end >= cur ? Math.ceil(speed) : Math.floor(speed);

            speed = Math.ceil(Math.abs(end - cur) / 10);  //取绝对值 => 向上取值

            speed = end >= cur ? speed : - speed;

            
            console.log(speed);

            cur += speed;
            // console.log(cur);

            if(attr==="opacity"){
                ele.style[attr] = cur/1000;
            }else{
                ele.style[attr] = cur + "px";
            }

            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur >= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            // 临界值判断
            if(Math.abs(end - cur) <= Math.abs(speed)){
                clearInterval(timer);

                if(attr==="opacity"){
                    ele.style[attr] = end/1000;
                }else{
                    ele.style[attr] = end + "px";
                }
              
            }

        },10)
    }

    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

    /* function animate(ele,end){
        var cur = ele.offsetTop;    // 1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        end = parseFloat(end);       // 设置运动的终点值 (可以去单位)

        // 匀速运动
        var speed = end >= cur ? 20 : -20 ;                // 每隔10ms运动的距离  (匀速)

        clearInterval(timer);         // 每次启动下一个之前 清除上一个
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);

            ele.style.top = cur + "px";

            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur >= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            // 临界值判断
            if(Math.abs(end - cur) <= Math.abs(speed)){
                clearInterval(timer);
                ele.style.top = end + "px";  // 
            }

        },10)
    }


    function animate(ele,end){
        var cur = ele.offsetWidth;    // 1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        end = parseFloat(end);       // 设置运动的终点值 (可以去单位)

        // 匀速运动
        var speed = end >= cur ? 20 : -20 ;                // 每隔10ms运动的距离  (匀速)

        clearInterval(timer);         // 每次启动下一个之前 清除上一个
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);

            ele.style.width = cur + "px";

            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur >= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            // 临界值判断
            if(Math.abs(end - cur) <= Math.abs(speed)){
                clearInterval(timer);
                ele.style.width = end + "px";  // 
            }

        },10)
    } */


    
</script>
</html>